<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_员工列表练习</title>
  <style>
    table{
      border: 1px solid black;
    }
    th,td{
      border: 1px solid black;
    }
  </style>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="i1">
<input type="text" placeholder="请输入员工工资" id="i2">
<input type="text" placeholder="请输入员工岗位" id="i3">
<button onclick="addEmp()">点我添加</button>
<hr>
<table>
  <caption>员工列表</caption>
  <tr>
    <th>员工姓名</th>
    <th>员工工资</th>
    <th>员工岗位</th>
  </tr>
</table>
<script>
  let arr = [];
  function addEmp(){
    //1、获取员工信息
    let uName = document.getElementById('i1').value;
    let uSalary = document.getElementById('i2').value;
    let uJob = document.getElementById('i3').value;
    if (uName.trim() == '' || uSalary.trim() == '' || uJob.trim() == ''){
      alert('请输入完整的员工信息');
      return;
    }
    console.log(uName,uSalary,uJob);
    //2、创建tr
    let tr = document.createElement('tr');
    //3、创建td
    let td1 = document.createElement('td');
    let td2 = document.createElement('td');
    let td3 = document.createElement('td');
    //4、设置td的内容
    td1.innerHTML = uName;
    td2.innerHTML = uSalary;
    td3.innerHTML = uJob;
    console.log(td1,td2,td3);
    //5、将td添加到tr中
    tr.append(td1,td2,td3);
    //6、将tr添加到table中
    document.querySelector('table').append(tr);
    //7、清空输入框
    document.getElementById('i1').value = '';
    document.getElementById('i2').value = '';
    document.getElementById('i3').value = '';
    //8、将员工信息保存到数组中
    arr.push({
      name:uName,
      salary:uSalary,
      job:uJob
    })
    console.log(arr);
  }
</script>
</body>
</html>
